<script lang="ts" setup>
// @ts-ignore
import type {GalleryImageInfo} from "~/models/media";
// @ts-ignore
import {getGalleryList} from "~/server/photo.service";
// @ts-ignore
import {Image, Spin} from '@arco-design/web-vue/es/index'

definePageMeta({
    layout: false
})
useHead({
    bodyAttrs: {
        class: 'page-template page-template-page-gallery page gallery'
    }
})

const page = ref(1)
const number = 30
const list = ref([] as GalleryImageInfo[])
const baseurl = ref('')
onMounted(() => {
    // 浏览器窗口变动
    window.onresize = masonryWidth
    window.addEventListener('scroll', onScroll)
    window.addEventListener('touchmove', onScroll)
    masonryWidth()
    getList()
})
const loading = ref(false);

function getList(): void {
    loading.value = true;
    getGalleryList({current: page.value, size: number}).then(({data}: any) => {
        data.data.photos?.map((val: any) => list.value.push(val))
        setTimeout(() => loading.value = false, 500)
    })
}

// 设置masonry 宽度
const width = ref(0);
const boxWidth = ref(240);
const defaultWidth = 240;        // 盒子宽度
const gutter = 20;        //盒子与盒子之间的间距
function masonryWidth() {
    const browser = document.body.clientWidth;
    if (browser <= defaultWidth * 2) {
        width.value = browser - 20;
        boxWidth.value = ((browser - gutter - 20) / 2);
    } else {
        const num = (browser - defaultWidth) / (defaultWidth + gutter);
        const n = parseInt(String(num));
        width.value = n * (defaultWidth + gutter) + defaultWidth;
        boxWidth.value = defaultWidth;
    }
}

let lastScrollTop = 0;

function onScroll(): void {
    const clientHeight = document.documentElement.clientHeight;
    const scrollTop = document.documentElement.scrollTop || window.pageYOffset;
    const scrollHeight = document.documentElement.scrollHeight;
    // 滚动到了底部
    const bottom = scrollHeight - (clientHeight + scrollTop);
    if (bottom < 1 && scrollTop > lastScrollTop) {
        page.value++
        getList();
    }
    lastScrollTop = scrollTop;
}

</script>

<template>
    <NuxtLayout name="common">
        <template v-slot:nav>
            <Nav :title="'画廊'"/>
        </template>
        <template v-slot:main>
            <div class="gallery-main" :style="{ width: width + 'px' }">
                <div class="group">
                    <template v-for="item in list">
                        <div class="item" :style="{ width: boxWidth + 'px' }">
                            <Image class="img" width="100%" :src="item.photoSrc"/>
                            <div class="mask" :style="{ display: boxWidth < 240 ? 'flex' : 'none' }"
                                 data-fancybox="gallery" :data-src="item.photoSrc">
                                <div class="top">
                                    <div class="btn">
                                        风起
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="prompt ellipsis2">{{ item.photoName }}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <Spin style="width: 100%;text-align: center; margin-top: 20px;" :size="36" v-if="loading"/>
            </div>
        </template>
    </NuxtLayout>
</template>
<style scoped lang="scss">
.gallery-main {
  margin: auto;

  .group {
    width: 100%;
    position: relative;

    .item {
      overflow: hidden;
      margin-bottom: 10px;
      position: relative;
      border-radius: 0.5rem;

      &:hover {
        .mask {
          display: flex !important;
        }
      }

      .img {
        width: 100%;
        border-radius: 0.5rem;
      }

      .mask {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0000004d;
        justify-content: space-between;
        padding: 0.85rem;
        color: #fff;
        cursor: zoom-in;

        .top {
          width: 100%;
          display: flex;

          .btn {
            display: flex;
            background: var(--color-sub);
            padding: 0.15rem 0.45rem;
            border-radius: 0.5rem;
            cursor: pointer;
            gap: 0.25rem;

            &:hover {
              background: var(--color);
            }

            &:before {
              font-family: iconfont;
              content: "\e640";
            }
          }
        }

        .bottom {
          .prompt {
            font-size: inherit;
            line-height: inherit;
          }
        }
      }
    }
  }
}

@media (min-width: 1152px) {
  .group {
    column-count: 5;
    column-gap: 0.75rem;
  }
}

@media (max-width: 1152px) {
  .group {
    column-count: 2;
    column-gap: 0;
  }
}
</style>
